<template>
  <div class="orderPay">
    <orderHeader title="支付订单">
      <template #tishi><span>温馨提示：商品下单成功后，以最终下单为准哦，请尽快结算</span></template>
    </orderHeader>
    <div class="box">
      <div class="container">
        <!-- 支付成功信息 -->
        <div class="succeed">
          <div class="cg-box">
            <div class="icon-ok"><svg t="1650201139622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2798" width="100" height="100">
                <path d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m-50.432-326.101333L310.613333 504.32a32 32 0 0 0-45.226666 45.226667l174.72 174.762666a32.341333 32.341333 0 0 0 0.341333 0.341334l0.256 0.213333a32 32 0 0 0 50.048-6.144l337.450667-379.605333a32 32 0 1 0-47.872-42.496l-318.762667 358.613333z" fill="#52C41A" p-id="2799"></path>
              </svg></div>
            <h5>订单提交成功！去付款咯～</h5>
            <p class="timeOut">请在<span class="color">0 小时 13 分</span>内完成支付, 超时后将取消订单</p>
            <p class="address">收货信息：{{itemOrder.phonenum}} {{itemOrder.userAddress}}</p>
            <p class="orderSum">应付总额：<span class="color">{{itemOrder.sum}}元</span></p>
          </div>
        </div>
        <!-- 支付方式 -->
        <div class="sction-pay">
          <div class="pay-title">
            <h5>选择以下支付方式付款</h5>
          </div>
          <!-- 支付平台 -->
          <div class="payment">
            <h3>支付平台 <span>（双击选择支付方式）</span></h3>
            <div class="payment-box">
              <a href="javascript:;" @click="payment(1)" :class="{action:userPayment===1}" @dblclick="open">
                <img src="imgs/pay/icon-ali.png" alt="">
              </a>
              <a href="javascript:;" :class="{action:userPayment===2}" @dblclick="open">
                <img src="imgs/pay/icon-wechat.png" alt="" @click="payment(2)">
              </a>
              <a href="javascript:;" @click="payment(3)" :class="{action:userPayment===3}" @dblclick="open">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21f373c603cb1284c1bcb7acaf2cb96d.jpg" alt=""> </a>
            </div>

          </div>
        </div>
      </div>
    </div>
    <Introduce></Introduce>
    <Footer></Footer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'orderPay',
  data() {
    return {
      // 控制支付渠道
      userPayment: ''
    }
  },
  computed: {
    ...mapState(['orderList']),
    itemOrder() {
      return this.orderList.find(item => item.id === this.$route.params.id)
    }
  },
  mounted() {
    this.getOrderItemList()
  },
  methods: {
    // 根据路由参数获取到vuex中对象的数据
    getOrderItemList() {
      console.log(this.$route.params.id)
    },
    payment(id) {
      if (id === 1) {
        this.userPayment = id
      } else if (id === 2) {
        this.userPayment = id
      } else {
        this.userPayment = id
      }
    },
    open() {
      this.$alert('<img src="imgs/wechat.png" alt="" style="width:200px;height:200px;">', '支付异常联系管理员', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        center: true,
        callback: () => {
          this.$message({
            type: 'info',
            message: '选择其他支付方式'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 40px;
  background-color: #f5f5f5;
  .succeed {
    position: relative;
    height: 140px;
    padding: 30px 48px 30px 183px;
    background: #fff;
    margin-bottom: 30px;
    .cg-box {
      height: 100px;
      padding: 20px 0;
      .icon-ok {
        position: absolute;
        top: 40px;
        left: 50px;
        text-align: center;
        line-height: 100px;
        img {
          color: green;
        }
      }
      h5 {
        font-size: 25px;
        span {
          color: #ccc;
          font-size: 16px;
        }
      }
      p {
        font-size: 15px;
        margin-top: 10px;
        span {
          margin: 0 5px;
        }
      }
      .orderSum {
        position: absolute;
        top: 20px;
        right: 0;
        span {
          font-size: 26px;
        }
      }
    }
  }
  .sction-pay {
    padding: 30px 48px;
    background-color: #fff;
    .pay-title {
      height: 50px;
      margin-bottom: 30px;
      border-bottom: 1px solid #ccc;
      h5 {
        font-size: 20px;
      }
    }
    .payment {
      h3 {
        font-size: 16px;
        margin-bottom: 15px;
      }
      .payment-box {
        a {
          display: inline-block;
          width: 115px;
          height: 40px;
          border: 0.8px solid #ccc;
          padding: 5px 20px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .action {
          border: 0.8px solid #ff6700;
        }
      }
    }
  }
}
.color {
  color: #ff6700;
}
</style>
